<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，使页面在移动设备上正确显示 -->
    <title>支付 - 我的书店</title> <!-- 页面标题 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入Bootstrap CSS文件 -->
    <!-- 自定义样式 -->
    <style>
        /* 重置body的默认样式 */
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif; /* 更改字体 */
            background-color: #f4f4f9; /* 更改背景颜色 */
            margin: 0; /* 移除默认边距 */
            padding: 0; /* 移除默认填充 */
        }

        /* 支付表单容器的样式 */
        .payment-form {
            background-color: #eaeaea; /* 更改背景颜色 */
            padding: 20px; /* 增加内边距 */
            border-radius: 8px; /* 圆角边框 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }

        /* 导航链接的样式 */
        .nav-link {
            border: 1px solid #cfcfcf; /* 更改导航链接边框颜色 */
            margin: 0 10px; /* 增加外边距 */
            padding: 7px 20px; /* 增加内边距 */
            text-decoration: none; /* 去除下划线 */
            color: #4a4a4a; /* 更改文字颜色 */
            font-weight: bold; /* 加粗文字 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
        .nav-link:hover {
            background-color: #eaeaea; /* 导航链接悬停时的背景颜色 */
        }

        /* 提交按钮的样式 */
        .btn-danger {
            background-color: #d9534f; /* 更改按钮背景颜色 */
            border: 1px solid #d43f3a; /* 更改按钮边框颜色 */
            color: #fff; /* 更改按钮文字颜色 */
            display: block; /* 块级元素 */
            margin: 20px auto 0; /* 增加外边距 */
            padding: 10px 20px; /* 增加内边距 */
            text-align: center; /* 文字居中 */
            font-weight: bold; /* 加粗文字 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
            cursor: pointer; /* 指针样式 */
        }
        .btn-danger:hover {
            background-color: #c9302c; /* 按钮悬停时的背景颜色 */
        }
    </style>
</head>
<body>
    <div class="container mt-4"> <!-- 容器，设置顶部外边距 -->
        <header class="d-flex justify-content-between align-items-center mb-4"> <!-- 页眉，使用Flex布局 -->
            <img src="images/logo.png" alt="Bookshop Logo" class="me-2" width="100"> <!-- 书店标志图片 -->
            <h1 class="text-center flex-grow-1">我的书店</h1> <!-- 书店名称 -->
        </header>
        <nav class="d-flex justify-content-center mb-4"> <!-- 导航栏，使用Flex布局 -->
            <a href="index.html" class="nav-link">主页</a> <!-- 导航链接 -->
            <a href="#" class="nav-link">关于我们</a> <!-- 导航链接 -->
            <a href="#" class="nav-link">联系我们</a> <!-- 导航链接 -->
        </nav>

        <h2 id="paymentInfo" class="mb-4">支付选项</h2> <!-- 支付信息标题 -->

        <form id="paymentForm" class="payment-form"> <!-- 支付表单 -->
            <div class="mb-3">
                <label for="cardNumber" class="form-label">银行/信用卡号</label>
                <input type="text" class="form-control" id="cardNumber" required oninvalid="setCustomValidity('请输入xxxx');">
            </div>
            <div class="mb-3 row">
                <div class="col">
                    <label for="expirationMonth" class="form-label">到期日期</label>
                    <select class="form-select" id="expirationMonth" required>
                        <option value="">月份</option>
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                </div>
                <div class="col">
                    <label for="expirationYear" class="form-label">&nbsp;</label>
                    <select class="form-select" id="expirationYear" required>
                        <option value="">年份</option>
                        <option value="2023">2023</option>
                        <option value="2024">2024</option>
                        <option value="2025">2025</option>
                        <option value="2026">2026</option>
                        <option value="2027">2027</option>
                        <option value="2028">2028</option>
                        <option value="2029">2029</option>
                    </select>
                </div>
            </div>
            <div class="mb-3">
                <label for="securityCode" class="form-label">安全码</label>
                <input type="text" class="form-control" id="securityCode" required>
                <div class="form-text">(通常在卡的背面有3-4位数的代码)</div>
            </div>
            <button type="submit" class="btn btn-danger">继续</button> <!-- 提交按钮 -->
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <!-- 引入Bootstrap JS文件 -->
    <script>
        // 获取URL参数
        const urlParams = new URLSearchParams(window.location.search);
        const bookTitle = urlParams.get('book');
        const bookPrice = urlParams.get('price');

        // 更新支付信息
        if (bookTitle && bookPrice) {
            document.getElementById('paymentInfo').textContent = `支付 ${bookTitle} - $${bookPrice}`;
        }

        // 表单提交事件监听器
        document.getElementById('paymentForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const cardNumber = document.getElementById('cardNumber').value;
            const expirationMonth = document.getElementById('expirationMonth').value;
            const expirationYear = document.getElementById('expirationYear').value;
            const securityCode = document.getElementById('securityCode').value;

            // 发送POST请求到API
            fetch('https://mudfoot.doc.stu.mmu.ac.uk/node/api/creditcard', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    master_card: parseInt(cardNumber),
                    exp_year: parseInt(expirationYear),
                    exp_month: parseInt(expirationMonth),
                    cvv_code: securityCode
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.message) {
                    const lastFour = cardNumber.slice(-4);
                    window.location.href = `success.html?lastFour=${lastFour}&book=${encodeURIComponent(bookTitle)}&price=${bookPrice}`;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('发生错误，请重试。');
            });
        });
    </script>
</body>
</html>